<template>
  <div class="cart-list-item">
    <!-- <div class="checke-button"><input type="checkbox" name="" id="" /></div> -->
    <check-button class="check-buttom" :isChecked="item.checked" @click.native='toggleStatus' />
    <div class="img_box" @click="toDetail">
      <img
        :src="item.img"
        alt=""
      />
    </div>
    <div @click="toDetail" class="item-content">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="info">{{ item.desc }}</div>
      <div class="bottom-info">
        <div class="price">￥<span>{{item.price}}</span></div>
        <div class="count"><span class="sign">x</span>{{ item.count }}</div>
      </div>
      <div class="delbtn"><span @click.stop='delItem'>删除</span></div>
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/checkbutton/CheckButton.vue';
export default {
  components: { CheckButton },
  name: "CartListItem",
  props:{
    item: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  methods:{
    toggleStatus(){
      this.item.checked = !this.item.checked
      this.$store.commit('toggleStatus',this.item.iid)
    },
    toDetail(iid){
      this.$router.push('/detail/' + this.item.iid)
    },
    delItem(){
      this.$emit('delItem')
    }
  }
};
</script>

<style scoped>
.cart-list-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(100,100,100,0.1);
  border-radius: 5px;
  padding: 5px 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.check-buttom {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 24px;
}
.img_box {
  margin-left: 10px;
  width: 100px;
  height: 136px;
  flex:1
}
.img_box img {
  width: 100px;
  height: 136px;
  border-radius: 5px;
  overflow: hidden;
}
.item-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  flex: 2;
}
.item-content .title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color:#333;
}
.item-content .info {
  margin-top: 10px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 14px;
}
.item-content .bottom-info {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.bottom-info .price span{
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.item-content .delbtn {
  font-size: 14px;
  color: var(--color-high-text);
  text-align: right;
  margin-top: 5px;
}
.item-content .delbtn > span {
  padding: 5px;
}
</style>